/* 右侧事件标签
 * EventTab.jsx
 */
import React, { Component, PropTypes } from 'react';

import {upCompAttr,upCompSurface,upCompAnimation,upCompEvent} from '../../../actions/h5/ComponentAction';
import {updatePageAttr} from '../../../actions/h5/PageAction';
import {listMusic,listImage,listFile,clearPageIdArr} from '../../../actions/FileHandleAction';
import {upH5Attr} from '../../../actions/h5/H5Action';

import {FONTS,ANIMATIONS} from '../../../utils/H5constants';
import UploadComponent from '../../../components/UploadComponent.jsx';
import {getImageWH} from '../../../utils/H5helper';

 class EventTab extends Component{
	constructor(props){
		super(props);
	}

	actionTypeSelect(value){
		this.props.dispatch(upCompEvent(this.props.pageId,this.props.currentComp.get('id'),{actionType:value}));
	}

	constrolSet(name,value){
		const target=$("#event-control-target").val();
		const action=$("#event-control-action").val();
		this.props.dispatch(upCompEvent(this.props.pageId,this.props.currentComp.get('id'),{control:{target:target,action:action}}));
	}

	linkPrefix(value){
		let url=$("#event-link-url").val();
		if(value==''||value=='@submit'){
			$('#linkUrl').hide();
			url='';
		}else{
			$('#linkUrl').show();
		}
		if(value=='#page'){
			$('#linkUrl').attr('placeholder','输入单个数字页码');
		}else{
			$('#linkUrl').attr('placeholder','输入url地址');
		}
		this.props.dispatch(upCompEvent(this.props.pageId,this.props.currentComp.get('id'),{link:{prefix:value,url:url}}));

	}

	linkUrlSet(value){
		const prefix=$("#event-link-prefix").val();
		this.props.dispatch(upCompEvent(this.props.pageId,this.props.currentComp.get('id'),{link:{prefix:prefix,url:value}}));
	}


	render(){

		const compId=this.props.currentComp.get('id');
		const events=this.props.currentComp.get('events');
		let compEvent=Immutable.fromJS({actionType:"",control:{target: "", action: ""},link:{prefix: "", url: ""}});
		if(events.size>0){
			compEvent=events.get(0);
		}
		let optCompt=Array();
		this.props.page.get('components').forEach(item=>{
			if(item.get('name').indexOf('[')<0){
				optCompt.push(<option key={item.get('id')} value={item.get('id')}>{item.get('name')}</option>);
			}
		});
		const controlDiv=(
				<div>
				  当点击&nbsp;&nbsp;
				  <select id="event-control-target" className="input-sm" onChange={e=>this.constrolSet('target',e.target.value)} value={compEvent.get('control').get('target')}>
				  	<option value="">无</option>
				  	{optCompt}
				  </select>&nbsp;&nbsp;时&nbsp;&nbsp;
				  <select id="event-control-action" className="input-sm" onChange={e=>this.constrolSet('action',e.target.value)} value={compEvent.get('control').get('action')}>
				  	<option value="">无</option>
				  	<option value="show">显示</option>
				  	<option value="hide">隐藏</option>
				  </select>
				</div>
			);
		let urlDisplay='inline-block';
		if(compEvent.get('link').get('prefix')==''||compEvent.get('link').get('prefix')=='@submit'){
			urlDisplay='none';
		}
		const linkDiv=(
				<div>
					<div>当点击时</div>
					<div className="form-inline">
					  <select id="event-link-prefix" className="input-sm" style={{width:85}} onChange={e=>this.linkPrefix(e.target.value)} value={compEvent.get('link').get('prefix')}>
					  	<option value="">无</option>
					  	<option value="http">http://</option>
					  	<option value="https">https://</option>
					  	<option value="#page">页码跳转</option>
					  	<option value="@submit">表单提交</option>
					  </select>&nbsp;&nbsp;
					  <input id="event-link-url" id="linkUrl" className="form-control" type="text"  style={{width:180,display:urlDisplay}} value={compEvent.get('link').get('url')} onChange={e=>this.linkUrlSet(e.target.value)}/>
					</div>
				</div>
			);
		let optContent="";
		switch(compEvent.get('actionType')){
			case 'control' :
				optContent=controlDiv;
				break;
			case 'link' :
				optContent=linkDiv;
				break;
			default:
				optContent='';
		}
		
		return(
			<div>
				<div className="panel-group">
					<div>
						<span style={{fontSize:18,marginLeft:10}}>事件</span>
						{/*<button style={{float:'right',marginRight:20,border:'none',backgroundColor:'#fff'}}><i className="trash icon"  ></i></button>*/}
					</div>
					<div className="input-group">
					  <span className="input-group-addon">类别</span>
					  <select className="form-control input-sm" onChange={e=>this.actionTypeSelect(e.target.value)} value={compEvent.get('actionType')}>
					  	<option value="">无</option>
						<option value="control">控制类</option>
						<option value="link">链接类</option>
					  </select>
					</div>
					{optContent}
					<div className="ui divider"></div>
				</div>

				{/*<button className="ui small blue button" onClick={this.addEvent.bind(this)}><i className="plus icon"></i>添加事件 </button>*/}
			</div>
		);
	}
}

export default EventTab;